<template>
  <div>
    <el-row>
      <el-col :span="24">
        <!-- 放搜索条件 
        :inline="ture"让表单元素占一行,一行不够会换行-->
        <el-form :inline="true">
          <el-form-item label="公告标题">
            <el-input v-model="orderParam.tital" placeholder="公告标题"></el-input>
          </el-form-item>
          <el-form-item label="发布状态">
            <el-select placeholder="发布状态" v-model="orderParam.status">
              <el-option
                v-for="status in statusType"
                :key="status.id"
                :label="status.name"
                :value="status.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布人">
            <el-input v-model="orderParam.name" placeholder="发布人"></el-input>
          </el-form-item>

          <el-form-item label="发布时间">
            <el-date-picker v-model="orderParam.createTime" placeholder="发布时间"></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="clear">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryAnno">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="24">
        <!-- 放表格数据 -->
        <el-button type="danger" @click="addAnno">新建登记</el-button>

        <el-table :data="sortedTableData" style="width: 100%">
          <el-table-column label width="80">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.totop === 1" type="danger">已置顶</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="序号" width="80"></el-table-column>
          <el-table-column prop="tital" label="公告标题" width="200"></el-table-column>
          <el-table-column prop="content" label="公告内容" width="400">
  <template slot-scope="scope">
     <div class="custom-class">{{ scope.row.content }}</div>
  </template>
</el-table-column>
          <el-table-column prop="status" label="发布状态" width="150">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === 0 ? 'success' : scope.row.status === 1 ? 'danger' : 'info'"
              >{{ scope.row.status === 0 ? '草稿' : scope.row.status === 1 ? '已发布' : '其他' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="发布人" width="150"></el-table-column>
          <el-table-column prop="createTime" label="发布时间" width="200"></el-table-column>
     
          <el-table-column label="查看详情" width="150">
            <template slot-scope="scope">
            <el-button type="primary" @click.native="query(scope.row.id)">查看详情</el-button>
          </template>
          </el-table-column>
          <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <el-button type="primary">
                操作
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button
                    size="mini"
                    type="warning"
                    @click.native="moveToTop(scope.row.id)"
                  >置顶</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    size="mini"
                    type="warning"
                    @click.native="NoToTop(scope.row.id)"
                  >取消置顶</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    size="mini"
                    type="info"
                    icon="el-icon-delete"
                    @click.native="delAnno(scope.row.id)"
                  >删除</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="mini" type="primary" @click.native="updateAnno(scope.row.id)">编辑</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
          
        </el-table>
      </el-col>
    </el-row>

    <el-col :span="12">
      <!-- 放分页部分 -->
      <el-pagination
        background
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        :current-page="pageNum"
        layout="total, sizes, prev, pager, next"
        @next-click="nextPage"
        @prev-click="prevPage"
        @size-change="sizeChange"
        @current-change="currentPage"
        :total="total"
      ></el-pagination>
    </el-col>
    <!-- 弹窗// -->

    <el-dialog title="详情" :visible.sync="dialogFormVisible">
      <el-form>
        <el-row>
          <el-col :span="24">
            <img :src="imagUrl" alt="公告图片" class="image-style" />
          </el-col>
         
          <el-col :span="24">
            <el-form-item label="公告标题：">
              <h2>{{Annolist.tital}}</h2>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="公告内容：">
              <p>{{Annolist.content}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="用户：">
              <p>{{dateInfo.name}} 在 {{Annolist.createTime}} 发布的公告</p>
            </el-form-item>
      
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
      
    <script>
export default {
  data() {
    return {
      imagUrl:"",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dialogFormVisible: false,
      statusType: [
        { id: "1", name: "已发布" },
        { id: "0", name: "草稿" }
      ],
      orderParam: {
        tital: "",
        name: "",
        status: "",
        createTime: "",
        totop: ""
      },
      Annolist: [],
      tableData: [],
      dateInfo: [],
    };
  },
  methods: {
    clear() {
      this.orderParam.name = "";
      this.orderParam.status = "";
      this.orderParam.tital = "";
      this.orderParam.createTime = "";
    },
    prevPage(val) {
      //点击上一页触发
      this.pageNum = val;
      this.queryAnno();
    },
    nextPage(val) {
      //点击下一页触发
      this.pageNum = val;
      this.queryAnno();
    },
    sizeChange(val) {
      //val每一页条数
      this.pageNum = 1;
      this.pageSize = val;
      this.queryAnno();
    },
    currentPage(val) {
      this.pageNum = val;
      this.queryAnno();
    },
    queryCondition() {
      thispageNum = 1;
      this.queryAnno();
    },
    queryAnno() {
      //带分页参数pageNum,pageSize
      let pageParam = {};
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      pageParam.param = this.orderParam;
      if (this.orderParam.createTime != "") {
        this.orderParam.createTime = this.$moment(
          this.orderParam.createTime
        ).format("YYYY-MM-DD");
      }
      this.$axios.post("api/Announcement/queryAnno", pageParam).then(res => {
        if (res.data.code == 200) {
          let pageData = res.data.data;
          // 将置顶的数据移动到数组最前面
          let sortedList = pageData.list.sort((a, b) => {
            // 这里根据具体的逻辑判断哪些数据需要置顶，假设 status 为 1 表示置顶
            if (a.status === 1 && b.status !== 1) {
              return -1;
            } else if (a.status !== 1 && b.status === 1) {
              return 1;
            } else {
              return 0;
            }
          });
          this.tableData = pageData.list;
          //给分页参数赋值
          this.total = pageData.total;
          this.pageNum = pageData.pageNum;
          this.pageSize = pageData.pageSize;
        }
      });
    },
    delAnno(val) {
      console.log(val); // 在这里打印val
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios.get("api/Announcement/deleteAnno/" + val).then(res => {
            if (res.data.code == 200) {
              //发删除请求
              this.$message.success("删除成功!");
              this.queryAnno();
            }
          });
        })
        .catch(() => {});
    },
    updateAnno(val) {
      console.log(val); // 首先检查一下 val 是否有值
      this.$router.push({ path: "/updateAnno", query: { id: val } });
    },
    addAnno() {
      this.$router.push({ path: "/addAnno" });
    },

    moveToTop(id) {
      console.log("ID: ", id);
      this.$axios.post("api/Announcement/updateTotop", { id: id }).then(res => {
        if (res.data.code === 200) {
          this.$message.success("置顶成功!");
          this.queryAnno();
         
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    NoToTop(id) {
      console.log("ID: ", id);
      this.$axios.post("api/Announcement/updateNoTotop", { id: id }).then(res => {
        if (res.data.code === 200) {
          this.$message.success("取消成功!");
          this.queryAnno();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    query(val){
    this.dialogFormVisible =true
      this.$axios.get("api/Announcement/queryById/" + val).then(res => {
        if (res.data.code == 200) {
          this.Annolist = res.data.data; // 使用this来引用data()中的originalForm
          this.imagUrl = this.Annolist.imgSrc; // 可以直接从this.originalForm中获取imgSrc
        }
      });
    
    },
    queryById1() {
      this.$axios.get("api/employee/queryById/" + this.userId).then(res => {
        if (res.data.code == 200) {
          console.log("公告: ", res.data.data.name);
          this.dateInfo = res.data.data;
        }
      });
    }
  },
  created() {
    this.queryAnno();
    this.userId = window.localStorage.getItem("userId");
    this.queryById1();
    
  },
  computed: {
    sortedTableData() {
      // 创建一个新的数组副本并对其进行排序
      return [...this.tableData].sort((a, b) => b.totop - a.totop);
    }
  }
};
</script>
      
  <style scoped>
  .custom-class {
  max-height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>